<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { FormInstance } from "element-plus";
import { message } from "@/utils/message";

import { copyPlatform, listParentPlatform } from "@/api/LabPlatformApi";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => {
      return {};
    }
  },
  platformId: {
    type: String
  },
  platformName: {
    type: String
  }
});

const ruleFormRef = ref<FormInstance>();
const formVisible = ref(false);
const formData = ref(props.data);
const emit = defineEmits(["update:visible", "add-item"]);

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  console.log("formEL", formEl);
  await formEl.validate(async valid => {
    if (valid) {
      const validName = await listParentPlatform({
        parentExpId: props.platformId,
        showParent: true
      });
      const validNameList = validName.data.map(item => item.name);
      if (validNameList.includes(formData.value.name)) {
        message("该实验平台已存在", { type: "error" });
        formVisible.value = false;
        return;
      } else {
        const ret = await copyPlatform({
          Name: formData.value.name,
          Desc: formData.value.desc,
          CopyFrom: formData.value.CopyFrom
        });
        if (ret.errorCode !== 0) {
          message(ret.message, { type: "error" });
          formVisible.value = false;
          return;
        } else {
          message("提交成功", { type: "success" });
          resetForm(formEl);
          formVisible.value = false;
          emit("add-item");
        }
      }
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const closeDialog = () => {
  formVisible.value = false;
  resetForm(ruleFormRef.value);
};

watch(
  () => formVisible.value,
  val => {
    emit("update:visible", val);
  }
);

watch(
  () => props.visible,
  val => {
    formVisible.value = val;
  }
);

watch(
  () => props.platformId,
  val => {
    formData.value.CopyFrom = val;
  }
);

watch(
  () => props.platformName,
  val => {
    formData.value.PlatformName = val;
  }
);

const rules = {
  name: [{ required: true, message: "请输入名称", trigger: "blur" }]
};
</script>

<template>
  <el-dialog
    v-model="formVisible"
    title="新增实验配置"
    :width="680"
    :before-close="closeDialog"
  >
    <el-form
      ref="ruleFormRef"
      :model="formData"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="名称" prop="name">
        <el-input
          v-model="formData.name"
          :style="{ width: '480px' }"
          placeholder="请输入名称"
        />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input
          v-model="formData.desc"
          type="textarea"
          :style="{ width: '480px' }"
          placeholder="请输入描述"
        />
      </el-form-item>
      <!-- //实验选项 -->
      <el-form-item label="实验平台">
        <el-select
          v-model="formData.PlatformName"
          placeholder="请选择实验配置"
          :style="{ width: '480px' }"
          :disabled="true"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取11消</el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<style scoped></style>
